$card-ftsize: 30upx;

.module-back {
	background: #ffffff;
	border-radius: 12upx;
	display: flex;
	border: 1upx solid #eeeeee;
	// box-shadow: 0px 0px 6upx #cccccc !important;
	margin: 0 34upx;
}

.exerc-card {
	flex-direction: column;
	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90upx;
		width: 100%;
		padding: 0 30upx;
		&::before {
			border-bottom: 1upx solid #e1e1e1;
		}
	}

	// 题目标题的顶部左侧
	.title-left {
		color: #434343;
		font-size: $card-ftsize;
		line-height: $card-ftsize;
		position: relative;

		&::before {
			content: " ";
			position: absolute;
			top: -4upx;
			height: 36upx;
			width: 8upx;
			border-radius: 8upx;
			background: $maincolor;
		}

		// 题目类型以及分数
		.exerc-type {
			padding-left: 20upx;
			padding-right: 10upx;
		}

		.exerc-score {
			color: #999999;
			font-size: 26upx;
		}
		
		.exerc-noda {
			color: #e03636;
			font-size: 26upx;
			padding-left: 20upx;
		}
	}

	// 题目标题的右侧
	.title-right {
		font-size: $card-ftsize;
		line-height: $card-ftsize;
		.crt-text {
			color: $maincolor;
			font-size: 32upx;
		}
		.all-text {
			color: #636463;
		}
	}
	// 题目类型
	.card-content {
		padding:24upx 34upx;
		color: #434343;
		.exerc-topic {
			font-size: $card-ftsize;
			line-height: 42upx;
			margin-bottom: 34upx;
		}
		.analyze-text {
			color: #636463;
			font-size: $card-ftsize;
			margin-top: 18upx;
		}
	}
	// 选择项
	.exerc-options {
		
		.op-item {
			border-radius: 8upx;
			padding: 10upx 26upx;
			margin-bottom: 24upx;
			border: 2upx solid #ededed;
			
			&:active {
				background-color: #eeeeee;
			}
			// 选中的样式
			&.select {
				position: relative;
				color: $maincolor;
				border: 2upx solid $maincolor;
				background: rgba(11, 86, 177, .2);
				
				.op-key, .op-label {
					color: $maincolor;
				}
			}
			// 正确的样式
			&.correct {
				position: relative;
				color: #6bbb72;
				border: 2upx solid #6bbb72;
				background: rgba(107, 187, 114, .2);
				
				.op-key, .op-label {
					color: #6bbb72;
				}
			}
			
			// 错误的样式
			&.error {
				position: relative;
				color: #e03636;
				border: 2upx solid #e03636;
				background: rgba(244, 54, 54, .2);
				.op-key, .op-label {
					color: #e03636;
				}
				&::after {
					content: "\e637";
					font-size: 36upx;
					position: absolute;
					right: 28upx;
					top: 6upx;
				}
			}
			
			&.select::after,
			&.correct::after {
				content: "\e611";
				font-size: $card-ftsize;
				position: absolute;
				right: 30upx;
				top: 12upx;
			}
		}
		
		.op-item .op-key,
		.op-item .op-label {
			color: #434343;
			font-size: $card-ftsize;
			margin-right: 12upx;
		}
		
		
	}
	
	// 答题卡样式
	&.sheet {
		background: #ffffff;
		border-radius: 12upx;
		border: 1upx solid #eeeeee;
		margin: 0 34upx;
		margin-top: 30upx;
		height: calc(100vh - 268upx);
		position: relative;
		.title-right {
			color: #636463;
			font-size: 28upx;
			.ansed-text, .ansno-text, .anscr-text, .anser-text {
				position: relative;
				padding-left: 50upx;
			}
			.ansed-text::before,
			.ansno-text::before,
			.anscr-text::before,
			.anser-text::before{
				content: "";
				position: absolute;
				left: 24upx;
				top: 10upx;
				width: 10upx;
				height: 10upx;
				border-radius: 10upx;
				border: 1px solid $maincolor;
				background: $maincolor;
			}
			.ansno-text::before {
				border: 1px solid #888888;
				background: transparent;
			}
			.anscr-text::before {
				border: 1px solid #6bbb72;
				background: #6bbb72;
			}
			.anser-text::before {
				border: 1px solid #e03636;
				background: #e03636;
			}
		}
		
		.card-content {
			padding-left: 38upx;
			padding-top: 30upx;
			padding-right: 0;
			position: absolute;
			top: 90upx;
			bottom: 0;
			overflow: auto;
			.item-content {
				display: flex;
				flex-wrap: wrap;
			}
		}
		
		.answer-item {
			width: 70upx;
			height: 70upx;
			line-height: 66upx;
			border-radius: 70upx;
			border: 1upx solid #d1d1d1;
			margin-right: 36upx;
			margin-bottom: 24upx;
			text-align: center;
			
			text {
				color: #101010;
				font-size: 30upx
			}
			
			&:active {
				background: #eeeeee;
			}
			
			&.select {
				background: $maincolor;
				border-color: $maincolor;
				text {
					color: #ffffff;
				}
			}
			
			&.correct {
				background: #6bbb72;
				border-color: #6bbb72;
				text {
					color: #ffffff;
				}
			}
			
			&.error {
				background: #e03636;
				border-color: #e03636;
				text {
					color: #ffffff;
				}
			}
		}
	}
}